<template>
  <div class="page-op">
    <Button type="primary" icon="md-add" @click="onAdd">{{$t('page.system.op.add')}}</Button>
    <Divider />
    <Table class="mt-15" :columns="columns" :data="list" :loading="loading">
      <template slot-scope="{ row }" slot="lastLoginTime">
        <Time v-if="row.lastLoginTime" :time="row.lastLoginTime" />
      </template>
      <template slot-scope="{ row }" slot="status">
        <Tag v-if="row.status==='OK'" color="success">{{$t('status.ok')}}</Tag>
        <Tag v-else color="default">{{$t('status.banned')}}</Tag>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <ButtonGroup>
          <Button v-if="row.account!==self" @click="onEdit(row)">{{$t('button.edit')}}</Button>
          <Button v-if="row.account!==self" :type="row.status==='OK'?'error':'success'" @click="onStatus(row)">{{$t(row.status==='OK'?'status.banned':'status.ok')}}</Button>
        </ButtonGroup>
      </template>
    </Table>
    <OpEditor ref="editor" @onRefresh="loadOps"></OpEditor>
  </div>
</template>
<script>
  import OpEditor from './comp/opeditor'
  export default {
    components: { OpEditor },
    data() {
      return {
        self: '',
        columns: [
          { renderHeader: (h, col) => { return h('span', this.$t('page.system.op.tb.account')) }, key: 'account' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.system.op.tb.nick')) }, key: 'nick' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.system.op.tb.lastLoginIp')) }, key: 'lastLoginIp' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.system.op.tb.lastLoginTime')) }, slot: 'lastLoginTime' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.system.op.tb.status')) }, slot: 'status', align: 'center', width: 100 },
          { title: '', slot: 'action', width: 150, align: 'center' }
        ],
        loading: false,
        list: [],
      }
    },
    created() {
      let user = this.$storage.getUser()
      this.self = user.account
      this.loadOps()
    },
    methods: {
      loadOps() {
        this.loading = true
        this.$md.dispatch('operators',).then(data => {
          if (data.retCode === 1) {
            this.list = data.data || []
          }
          this.loading = false
        })
      },
      onAdd() {
        this.$refs.editor.show()
      },
      onEdit(operator) {
        this.$refs.editor.show(operator)
      },
      onStatus(operator) {
        this.$Modal.confirm({
          title: this.$t('status.changemodel.title'),
          content: this.$t('status.changemodel.content'),
          onOk: () => {
            this.$md.dispatch('operator_status', {
              data: operator.account
            }).then(data => {
              if (data.retCode === 1) {
                this.loadOps()
              }
            })
          }
        })
      },
    }
  }
</script>
